<!-- 结构 -->
<script setup lang="ts">
// 引入组件
// import HmHeader from './components/HmHeader.vue';
// import HmContent from './components/HmContent.vue';
// import HmFooter from './components/HmFooter.vue';
import { onMounted, ref } from 'vue';
import ChildComp from './components/ChildComp.vue';

// 父组件提供和定义数据
const car = ref('保时捷');

const money = ref(100);

const changeMoney = (count: number) => {
  money.value += count
}

const childRef = ref<InstanceType<typeof ChildComp>>()
onMounted(() => {
  childRef.value?.logCar1()
})

</script>

<!-- JS逻辑 -->
<template>
  <div class="app-page">


    <div>父组件：{{ car }}</div>

    <!-- <ChildComp ref="childRef" /> -->

    <hr>

    <!-- 父组件传值给子组件 -->
    <!-- <ChildComp :car="car" :money="money" @change-money="money += $event" /> -->
    <ChildComp :car="car" :money="money" @change-money="changeMoney" @change-car="car = $event" />

    <!-- 使用组件 -->
    <!-- <HmHeader />
    <HmContent />
    <HmFooter /> -->

  </div>
</template>

<!-- 样式 -->
<style lang="css" scoped>
.app-page {
  width: 600px;
  height: 800px;
  background-color: rebeccapurple;
}
</style>